<template>
<view>
	<view class="flex-center">
		<view class="ordernavmain1" v-if="userlevel==4">
			<view class="ordereach1" :class="activenav1 ==1 ? 'activenav1':''" @click="navclick1(1)">普通会员</view>
			<view class="ordereach1" :class="activenav1 == 2 ? 'activenav1':''" @click="navclick1(2)">授权推客</view>
			<view class="ordereach1" :class="activenav1 == 3 ? 'activenav1':''" @click="navclick1(3)">门店推客</view>
		</view>
		<view class="ordernavmain1" v-if="userlevel==3">
			<view class="ordereach1" :class="activenav1 ==1 ? 'activenav1':''" @click="navclick1(1)">普通会员</view>
			<view class="ordereach1" :class="activenav1 == 2 ? 'activenav1':''" @click="navclick1(2)">授权推客</view>
		</view>
	</view>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" 
		@down="downCallback">
		<!-- :down="downOption" -->
		<view class="user-fans">
<!-- 			<view class="header">
				<u-search v-model="keyword" shape="round" background="white" placeholder="请输入搜索关键词" @search="changeTab"
					@custom="changeTab" />
				
			</view> -->
			<view class="content">
				<view class="card-box p-t-20">
					<view style="margin: 0 26rpx; border-radius: 14rpx;" @click="getdetail(item.user_id)"
					 v-for="(item, index) in fansList" :key="index" class="card-item flex row-between bg-white p-20">
						<view class="flex">
							<u-image :src="item.avatar" border-radius="50%" width="100rpx" height="100rpx" />
							<view class="fans-info m-l-20">
								<view class="flex-s fanbox">
									<view class="fans-name bold line-1">{{item.nickname}}</view>
<!-- 									<view class="flex-start">
										<image class="inviteavatar" :src="item.invite_leader_info.avatar" mode=""></image>
										<view class="invitename">{{item.invite_leader_info.nickname}}</view>
									</view> -->
								</view>
								<view class="flex lighter m-t-20" style="font-size: 26rpx; color: #8f8f8f">
									<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
									<!-- <view>{{item.create_time}}</view> -->
								</view>
							</view>
						</view>
						<!-- <view class="flex-col xs flex-none m-l-20">
							<view class="msg"><span class="primary">{{item.fans_team}} </span>人</view>
							<view class="m-t-5 msg"><span>{{item.fans_order}} </span>单</view>
							<view class="m-t-5 msg"><span>{{item.fans_money}} </span>元</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</mescroll-body>
</view>
</template>

<script>
	import {
		sortType,
	} from '@/utils/type';
	import {
		shopstatLog
	} from '@/api/user';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无相关数据', // 提示
					}
				},
				active: 'first',
				sortType: -1,
				keyword: "",
				fansList: [],
				activenav1: 1,
				userlevel: '',
			};
		},
		onLoad(option) {
			this.type = Number(option.type)
			this.userlevel = uni.getStorageSync('userInfo').level
		},
		methods: {
			navclick1(type) { //切换状态1
				// this.downCallback()
				let that = this;
				that.activenav1 = type;
				that.downCallback()
			},
			getdetail(option){
				console.log(option)
				// if(this.type == 0){
					// this.apifun.navigate('/bundle/pages/behaviors','id='+option)
					this.apifun.navigate('/bundle/pages/behaviors','id='+option)
				// }
				// if(this.type == 1){
					// this.apifun.navigate('/bundle/pages/consumer','id='+option)     
				// }
				// if(this.type == 2){
				// 	// this.apifun.navigate('/bundle/pages/behaviors', query: {id: option})
				// 	this.$Router.replace({
				// 		path: '/bundle/pages/behaviors',
				// 		query: {
				// 			id: option
				// 		}
				// 	})
				// }
			},
			onRefresh() {
				this.fansList = []
				this.mescroll.resetUpScroll();
			},

			// 上拉加载 
			upCallback(page) {
				const {
					fansSort,
					moneySort,
					orderSort,
					active,
					keyword,
				} = this;
				const params = {
					// page_size: page.size,
					// page_no: page.num,
					time: 1,
					level: this.activenav1,
				};
				shopstatLog(params).then(({
					data
				}) => {
					if (page.num == 1) this.fansList = [];
					const curPageData = data.list;
					const curPageLen = curPageData.length;
					const hasNext = !!data.more;
					this.fansList = this.fansList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})

			},

			changeTab(val) {
				this.active = val
				this.onRefresh()
			},

		}
	};
</script>
<style lang="scss">
	.ordernavmain1 {
		margin-top: 30rpx;
		/* width: 50%; */
		display: flex;
		justify-content: space-between;
	}
	
	.ordernavmain {
		/* width: 85%; */
		display: flex;
		justify-content: space-between;
	}
	.ordereach1 {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 130rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
		margin-right: 26rpx;
	}
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 130rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
	}
	
	.activenav {
		color: #fff;
		background-color: #ee434b;
	}
	
	.activenav1::after {
		font-size: 34rpx;
		position: absolute;
		left: 50%;
		top: 46rpx;
		content: "";
		display: block;
		width: 60rpx;
		margin-left: -30rpx;
		height: 4rpx;
		background-color: #f3430e;
		border-radius: 2rpx;
	}
	
	.activenav1 {
		font-size: 30rpx;
		color: #ee434b;
	}
	.user-fans {
		.header {
			.top-bar {
				padding: 18rpx 50rpx;
				height: 100rpx;

				.bar-item {
					flex: 1;
					padding: 0 30rpx;
					height: 58rpx;

					&:not(:last-of-type) {
						margin-right: 54rpx;
					}
				}

				.item-active {
					color: white;
					background-color: $-color-primary;
					border-radius: 100rpx;
				}
			}

			.sort-bar {
				height: 80rpx;

				.sort-bar-item {
					flex: 1;

					.arrow-icon {
						transform: scale(0.36);
					}

					.item-active {
						color: $-color-primary;
					}
				}
			}
		}
	}

	.content {
		.card-box {
			.card-item {
				.fans-name {
					width: 300rpx;
				}
				&:not(:last-of-type) {
					// border-bottom: $-solid-border;
				}
			}
		}
	}
	.inviteavatar{
		width: 40rpx;
		height: 40rpx;
		border-radius: 30rpx;
	}
	.invitename{
		font-size: 22rpx;
		padding:0 8rpx;
	}
	.fanbox{
		width: 540rpx;
	}
</style>
